
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
    
<div class="archive_info">
<h1>CSS <span class="color_h1">Position(定位)</span>
</h1>
<hr/>
<p>position 属性指定了元素的定位类型。</p>
<p>position 属性的五个值：</p>
<ul>
<li><a >static</a></li>
<li><a >relative</a></li>
<li><a >fixed</a></li>
<li><a >absolute</a></li>
<li><a >sticky</a></li>
</ul>
<p>元素可以使用的顶部，底部，左侧和右侧属性定位。然而，这些属性无法工作，除非是先设定position属性。他们也有不同的工作方式，这取决于定位方法。</p>
<hr/>
<h2 id="position-static">static 定位</h2>
<p>HTML 元素的默认值，即没有定位，遵循正常的文档流对象。</p>
<p>静态定位的元素不会受到 top, bottom, left, right影响。</p>
<div class="example">
<h2 class="example">实例</h2>
<div class="example_code">
<div class="hl-main"><span class="hl-identifier">div</span><span class="hl-identifier">.static</span><span class="hl-code"> </span><span class="hl-brackets">{</span><span class="hl-code">
</span><span class="hl-reserved">position:</span><span class="hl-code"> </span><span class="hl-string">static</span><span class="hl-reserved"></span><span class="hl-code">;
    </span><span class="hl-reserved">border:</span><span class="hl-code"> </span><span class="hl-number">3</span><span class="hl-string">px</span><span class="hl-code"> </span><span class="hl-string">solid</span><span class="hl-code"> </span><span class="hl-var">#73AD21</span><span class="hl-reserved"></span><span class="hl-code">;
</span><span class="hl-brackets">}</span></div>
</div>
<br/><a class="tryitbtn"  target="_blank">尝试一下 »</a>
</div>
<hr/>
<h2 id="position-fixed">fixed 定位</h2>
<p>元素的位置相对于浏览器窗口是固定位置。</p>
<p>即使窗口是滚动的它也不会移动：</p>
<div class="example">
<h2 class="example">实例</h2>
<div class="example_code">
<div class="hl-main"><span class="hl-identifier">p</span><span class="hl-identifier">.pos</span><span class="hl-code">_</span><span class="hl-identifier">fixed</span><span class="hl-code">
</span><span class="hl-brackets">{</span><span class="hl-code">
</span><span class="hl-reserved">position:</span><span class="hl-string">fixed</span><span class="hl-reserved"></span><span class="hl-code">;
    </span><span class="hl-reserved">top:</span><span class="hl-number">30</span><span class="hl-string">px</span><span class="hl-reserved"></span><span class="hl-code">;
    </span><span class="hl-reserved">right:</span><span class="hl-number">5</span><span class="hl-string">px</span><span class="hl-reserved"></span><span class="hl-code">;
</span><span class="hl-brackets">}</span></div>
</div>
<br/><a class="tryitbtn"  target="_blank">尝试一下 »</a>
</div>
<p><b>注意：</b> Fixed 定位在 IE7 和 IE8 下需要描述 !DOCTYPE 才能支持。</p>
<p>Fixed定位使元素的位置与文档流无关，因此不占据空间。</p>
<p>Fixed定位的元素和其他元素重叠。</p>
<hr/>
<h2 id="position-relative">relative 定位</h2>
<p>相对定位元素的定位是相对其正常位置。</p>
<div class="example">
<h2 class="example">实例</h2>
<div class="example_code">
<div class="hl-main"><span class="hl-identifier">h2</span><span class="hl-identifier">.pos</span><span class="hl-code">_</span><span class="hl-identifier">left</span><span class="hl-code">
</span><span class="hl-brackets">{</span><span class="hl-code">
</span><span class="hl-reserved">position:</span><span class="hl-string">relative</span><span class="hl-reserved"></span><span class="hl-code">;
    </span><span class="hl-reserved">left:</span><span class="hl-code">-</span><span class="hl-number">20</span><span class="hl-string">px</span><span class="hl-reserved"></span><span class="hl-code">;
</span><span class="hl-brackets">}</span><span class="hl-code">
</span><span class="hl-identifier">h2</span><span class="hl-identifier">.pos</span><span class="hl-code">_</span><span class="hl-identifier">right</span><span class="hl-code">
</span><span class="hl-brackets">{</span><span class="hl-code">
</span><span class="hl-reserved">position:</span><span class="hl-string">relative</span><span class="hl-reserved"></span><span class="hl-code">;
    </span><span class="hl-reserved">left:</span><span class="hl-number">20</span><span class="hl-string">px</span><span class="hl-reserved"></span><span class="hl-code">;
</span><span class="hl-brackets">}</span></div></div>
<br/><a class="tryitbtn"  target="_blank">尝试一下 »</a>
</div>
<p>移动相对定位元素，但它原本所占的空间不会改变。</p>
<div class="example">
<h2 class="example">实例</h2>
<div class="example_code">
<div class="hl-main"><span class="hl-identifier">h2</span><span class="hl-identifier">.pos</span><span class="hl-code">_</span><span class="hl-identifier">top</span><span class="hl-code">
</span><span class="hl-brackets">{</span><span class="hl-code">
</span><span class="hl-reserved">position:</span><span class="hl-string">relative</span><span class="hl-reserved"></span><span class="hl-code">;
    </span><span class="hl-reserved">top:</span><span class="hl-code">-</span><span class="hl-number">50</span><span class="hl-string">px</span><span class="hl-reserved"></span><span class="hl-code">;
</span><span class="hl-brackets">}</span></div></div>
<br/><a class="tryitbtn"  target="_blank">尝试一下 »</a>
</div>
<p>相对定位元素经常被用来作为绝对定位元素的容器块。</p>
<hr/>
<h2 id="position-absolute">absolute 定位</h2>
<p>绝对定位的元素的位置相对于最近的已定位父元素，如果元素没有已定位的父元素，那么它的位置相对于&lt;html&gt;:</p>
<div class="example">
<h2 class="example">实例</h2>
<div class="example_code">
<div class="hl-main"><span class="hl-identifier">h2</span><span class="hl-code">
</span><span class="hl-brackets">{</span><span class="hl-code">
</span><span class="hl-reserved">position:</span><span class="hl-string">absolute</span><span class="hl-reserved"></span><span class="hl-code">;
    </span><span class="hl-reserved">left:</span><span class="hl-number">100</span><span class="hl-string">px</span><span class="hl-reserved"></span><span class="hl-code">;
    </span><span class="hl-reserved">top:</span><span class="hl-number">150</span><span class="hl-string">px</span><span class="hl-reserved"></span><span class="hl-code">;
</span><span class="hl-brackets">}</span></div></div>
<br/><a class="tryitbtn"  target="_blank">尝试一下 »</a>
</div>
<p>absolute 定位使元素的位置与文档流无关，因此不占据空间。</p>
<p>absolute 定位的元素和其他元素重叠。</p>
<hr/>
<h2 id="position-sticky">sticky 定位</h2>
<p>sticky 英文字面意思是粘，粘贴，所以可以把它称之为粘性定位。</p>
<p> <span class="marked">position: sticky;</span> 基于用户的滚动位置来定位。</p>
<p>粘性定位的元素是依赖于用户的滚动，在 <strong>position:relative</strong> 与 <strong>position:fixed</strong> 定位之间切换。</p>
<p>它的行为就像 <strong>position:relative;</strong> 而当页面滚动超出目标区域时，它的表现就像 <strong>position:fixed;</strong>，它会固定在目标位置。</p>
<p>元素定位表现为在跨越特定阈值前为相对定位，之后为固定定位。</p>
<p>这个特定阈值指的是 top, right, bottom 或 left 之一，换言之，指定 top, right, bottom 或 left 四个阈值其中之一，才可使粘性定位生效。否则其行为与相对定位相同。</p>
<p><strong>注意: </strong>Internet Explorer, Edge 15 及更早 IE 版本不支持 sticky 定位。 Safari 需要使用 -webkit- 
prefix (查看以下实例)。 </p>
<div class="example">
<h2 class="example">实例</h2>
<div class="example_code">
<div class="hl-main"><span class="hl-identifier">div</span><span class="hl-identifier">.sticky</span><span class="hl-code"> </span><span class="hl-brackets">{</span><span class="hl-code">
</span><span class="hl-reserved">position:</span><span class="hl-code"> -</span><span class="hl-code">webkit-sticky</span><span class="hl-reserved"></span><span class="hl-code">; </span><span class="hl-comment">/*</span><span class="hl-comment"> Safari </span><span class="hl-comment">*/</span><span class="hl-code">
</span><span class="hl-reserved">position:</span><span class="hl-code"> </span><span class="hl-code">sticky</span><span class="hl-reserved"></span><span class="hl-code">;
    </span><span class="hl-reserved">top:</span><span class="hl-code"> </span><span class="hl-number">0</span><span class="hl-reserved"></span><span class="hl-code">;
    </span><span class="hl-reserved">background-color:</span><span class="hl-code"> </span><span class="hl-var">green</span><span class="hl-reserved"></span><span class="hl-code">;
    </span><span class="hl-reserved">border:</span><span class="hl-code"> </span><span class="hl-number">2</span><span class="hl-string">px</span><span class="hl-code"> </span><span class="hl-string">solid</span><span class="hl-code"> </span><span class="hl-var">#4CAF50</span><span class="hl-reserved"></span><span class="hl-code">;
</span><span class="hl-brackets">}</span></div></div>
<br/><a class="tryitbtn"  target="_blank">尝试一下 »</a>
</div>
<hr/>
<h2>重叠的元素</h2>
<p>元素的定位与文档流无关，所以它们可以覆盖页面上的其它元素</p>
<p>z-index属性指定了一个元素的堆叠顺序（哪个元素应该放在前面，或后面）</p>
<p>一个元素可以有正数或负数的堆叠顺序：</p>
<div class="example">
<h2 class="example">实例</h2>
<div class="example_code">
<div class="hl-main"><span class="hl-identifier">img</span><span class="hl-code">
</span><span class="hl-brackets">{</span><span class="hl-code">
</span><span class="hl-reserved">position:</span><span class="hl-string">absolute</span><span class="hl-reserved"></span><span class="hl-code">;
    </span><span class="hl-reserved">left:</span><span class="hl-number">0</span><span class="hl-string">px</span><span class="hl-reserved"></span><span class="hl-code">;
    </span><span class="hl-reserved">top:</span><span class="hl-number">0</span><span class="hl-string">px</span><span class="hl-reserved"></span><span class="hl-code">;
    </span><span class="hl-reserved">z-index:</span><span class="hl-code">-</span><span class="hl-number">1</span><span class="hl-reserved"></span><span class="hl-code">;
</span><span class="hl-brackets">}</span></div></div>
<br/><a class="tryitbtn"  target="_blank">尝试一下 »</a>
</div>
<p>具有更高堆叠顺序的元素总是在较低的堆叠顺序元素的前面。</p>
<p><strong>注意：</strong> 如果两个定位元素重叠，没有指定z - index，最后定位在HTML代码中的元素将被显示在最前面。</p>
<hr/>
<div class="tryit_ex">
<img alt="Examples" decoding="async" height="46px" src="/images/tryitimg.gif" width="40"/><h2>更多实例</h2>
</div>
<p><a  target="_blank">裁剪元素的外形</a></p>
<p>此示例演示如何设置元素的外形。该元素被剪裁成这种形状，并显示出来。</p>
<p><a  target="_blank">如何使用滚动条来显示元素内溢出的内容</a></p>
<p>这个例子演示了overflow属性创建一个滚动条，当一个元素的内容在指定的区域过大时如何设置以适应。</p>
<p><a  target="_blank">如何设置浏览器自动溢出处理</a></p>
<p>这个例子演示了如何设置浏览器来自动处理溢出。</p>
<p><a  target="_blank">更改光标</a></p>
<p>这个例子演示了如何改变光标。</p>
<hr/>
<h2>所有的CSS定位属性</h2>
<p>"CSS" 列中的数字表示哪个CSS(CSS1 或者CSS2)版本定义了该属性。 </p>
<table class="reference">
<tbody><tr>
<th align="left" width="25%">属性</th>
<th align="left" width="43%">说明</th>
<th align="left" width="27%">值</th>
<th align="left" width="5%">CSS</th>
</tr>
<tr>
<td><a >bottom</a></td>
<td>定义了定位元素下外边距边界与其包含块下边界之间的偏移。</td>
<td>auto<br/>
<i>length<br/>
	%<br/>
</i>inherit</td>
<td>2</td>
</tr>
<tr>
<td><a >clip</a></td>
<td>剪辑一个绝对定位的元素</td>
<td><i>shape<br/>
</i>auto<br/>
	inherit</td>
<td>2</td>
</tr>
<tr>
<td><a >cursor</a></td>
<td>显示光标移动到指定的类型</td>
<td><span class="value-inst-uri noxref"><i>url</i><br/>
</span>auto<br/>
      crosshair<br/>
      default<br/>
      pointer<br/>
      move<br/>
      e-resize<br/>
      ne-resize<br/>
      nw-resize<br/>
      n-resize<br/>
      se-resize<br/>
      sw-resize<br/>
      s-resize<br/>
      w-resize<br/>
      text<br/>
      wait<br/>
      help</td>
<td>2</td>
</tr>
<tr>
<td><a >left</a></td>
<td>定义了定位元素左外边距边界与其包含块左边界之间的偏移。</td>
<td>auto<br/>
<i>length<br/>
	%<br/>
</i>inherit</td>
<td>2</td>
</tr>
<tr>
<td><a >overflow</a><br/>
</td>
<td>设置当元素的内容溢出其区域时发生的事情。</td>
<td>auto<br/>
      hidden<br/>
      scroll<br/>
	visible<br/>
      inherit</td>
<td>2</td>
</tr>
<tr>
<td><a >overflow-y</a><br/>
</td>
<td>指定如何处理顶部/底部边缘的内容溢出元素的内容区域</td>
<td>auto<br/>
      hidden<br/>
      scroll<br/>
	visible<br/>
      no-display<br/>
      no-content</td>
<td>2</td>
</tr>
<tr>
<td><a >overflow-x</a><br/>
</td>
<td>指定如何处理右边/左边边缘的内容溢出元素的内容区域</td>
<td>auto<br/>
      hidden<br/>
      scroll<br/>
	visible<br/>
      no-display<br/>
      no-content</td>
<td>2</td>
</tr>
<tr>
<td><a >position</a></td>
<td>指定元素的定位类型</td>
<td>absolute<br/>
      fixed<br/>
      relative<br/>
      static<br/>
      inherit</td>
<td>2</td>
</tr>
<tr>
<td><a >right</a></td>
<td>定义了定位元素右外边距边界与其包含块右边界之间的偏移。</td>
<td>auto<br/>
<i>length<br/>
	%<br/>
</i>inherit</td>
<td>2</td>
</tr>
<tr>
<td><a >top</a></td>
<td>定义了一个定位元素的上外边距边界与其包含块上边界之间的偏移。</td>
<td>auto<br/>
<i>length<br/>
	%<br/>
</i>inherit</td>
<td>2</td>
</tr>
<tr>
<td><a >z-index</a></td>
<td>设置元素的堆叠顺序</td>
<td>
<i>number<br/>
</i>auto<br/>
	inherit</td>
<td>2</td>
</tr>
</tbody></table> <div class="scroll-top"><a >返回顶部</a></div>
</div>

    </body>
    </html>
    